<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <title>首页</title>
    <link rel="stylesheet" type="text/css" href="../css/aui.css"/>
    <link rel="stylesheet" type="text/css" href="../css/style.css"/>
    <link rel="stylesheet" type="text/css" href="../css/mui.min.css"/>
    <style type="text/css">
        body {
            background: #f4f4f4;
            background-position: center;
            background-size: cover;
            position: relative;
            line-height: 0;
            font-size: 13px;

        }

        header {
            position: relative;
        }

        header .pic img {
            width: 100%;
        }

        .search {
            position: absolute;
            bottom: 0px;
            width: 100%;
        }

        .aui-searchbar-wrap {
            background: rgba(255, 255, 255, .3)
        }

        .aui-searchbar {
            -webkit-box-pack: start;
        }

        .shili .aui-list-view.aui-grid-view .aui-list-view-cell {
            padding: 10px 0 0 0px;
        }

        .shili .aui-list-view {
            margin-bottom: 8px;
        }

        .w20 {
            width: 20%;
        }
        .w19 {
            width: 18.8%;
            margin-left:1%;
        }
        .bgWhite {
            background: white;
        }

        nav .aui-list-view.aui-grid-view .aui-list-view-cell .aui-img-body {
            padding: 18px 0;
        }

        nav .aui-list-view.aui-grid-view {
            padding-bottom: 5px;
        }
        .aui-list-view{
            margin-bottom:10px;
        }
        /*特色*/
        .tese .zfTitle{
            margin-bottom:10px;
        }
        .tese .aui-list-view.aui-grid-view {
            padding: 0;
        }

        .tese .aui-list-view.aui-grid-view .aui-list-view-cell {
            padding: 0;
            margin-bottom: 3px;
            position: relative;
        }
        .pic{
            position: relative;
        }
        .tese .aui-img-body {
            position: absolute;
            bottom: 0px;
            color: #fff;
            font-weight: bold;
            letter-spacing: 2px;
            padding: 18px 0 !important;
            right: 0;
            left: 0;
        }

        .tese .aui-list-view.aui-grid-view .aui-list-view-cell:nth-of-type(3n+2) {
            margin: 0 .5%;
        }

        .tese .aui-col-xs-4 {
            width: 33%;
        }

        .zfTitle {
            padding:20px 15px;
            font-size: 14px;
            /*border-left: 3px solid #327afa;*/
        }

        /*实力商家*/

        .shili .aui-list-view.aui-grid-view .aui-list-view-cell .aui-img-body {
            padding: 18px 0;
        }

        .shili .aui-list-view.aui-grid-view {
            /*padding-right: 1% ;*/
            padding-bottom: 5px;
        }
        .shili .aui-list-view.aui-grid-view{
            padding-right:0;
        }
        .shili .aui-list-view-cell {
            float: left;
        }

        /*库存*/
        .kucun img {
            width: 100%;
        }

        .kucun {
            margin-bottom: 15px;
        }

        /*行业市场*/
        .hangye .aui-col-xs-3 img {
            width: 40% !important;
        }

        .hangye .aui-list-view.aui-grid-view .aui-list-view-cell .aui-img-body {
            padding: 15px 0 !important;
            font-size: 13px;
        }

        /*分类*/
        .contain {
            line-height: 1.4;
            background: #fff;
            overflow: hidden;
        }

        .contain-left {
            width: 25%;
            text-align: center;
            float: left;
        }
        .contain-left .aui-list-view-cell {
            padding: 12px;

        }

        .contain .aui-list-view:after {
            border: none;
        }

        .contain-left .active {
            color: #fa5354;
            border: none;
            background: #f3f3f2
        }
        .contain-left,.contain-right{
            overflow-y: auto;
            height: 100%;
        }
        .contain-right {
            padding: 12px;
            width: 75%;
            float: left;
            display: inline-block;
        }
        .contain .aui-content{
            overflow-y:auto;
            position: relative;
        }
        .contain-right .pic img {
            width: 100%;
        }

        .tuijian-title {
            padding: 8px;
        }
        .tuijian{
            position: relative;
        }
        .other {
            display: none;
            text-align: center;
            overflow-y: hidden;
        }
        .other ul{
            position: relative;
            overflow-y: hidden;
        }
        .other .aui-list-view-cell {
            padding: 8px 0;
        }

        .other .aui-list-view-cell:after {
            border: none;
        }

        .aui-icon-sort {
            font-size: 20px !important;
        }
        .contain{
            height:100%;
        }
        .fenlei {
            position: absolute;
            top: 45px;
            display: none;
            width: 100%;
            bottom:0;
        }

        .other-title {
            padding: 15px;
            font-size: 14px;
            font-weight: 400;
            width: 100%;
            display: inline-block;
            position: relative;
        }
    </style>
</head>
<body>
<header>
    <div class="pic">
        <img src="../image/index1.jpg">
    </div>
    <div class="search">
        <div class="aui-searchbar-wrap demo" id="search">
            <div class="aui-searchbar aui-border-radius" tapmode onclick="openToTwo('search')">
                <i class="aui-iconfont aui-icon-search"></i>

                <div class="aui-searchbar-text">请输入搜索内容</div>
                <div class="aui-searchbar-input">
                    <form action="javascript:search();">
                        <input type="search" placeholder="请输入搜索内容" id="search-input">
                    </form>
                </div>
                <i class="aui-iconfont aui-icon-roundclosefill" tapmode onclick="clearInput()"></i>
            </div>
            <div class="aui-searchbar-cancel aui-text-info" tapmode onclick="cancelSearch()">取消</div>
        </div>
    </div>
</header>
<nav>
    <ul class="aui-list-view aui-grid-view">
        <li class="aui-list-view-cell aui-img w20" tapmode onclick="tobrand()">
            <img class="aui-img-object" src="../image/pinpai-icon.jpg">

            <div class="aui-img-body">
                品牌商
            </div>
        </li>
        <li class="aui-list-view-cell aui-img w20" tapmode onclick="openToTwo('gongchang_win')">
            <img class="aui-img-object" src="../image/gongchang-icon.jpg">

            <div class="aui-img-body">
                工厂
            </div>
        </li>
        <li class="aui-list-view-cell aui-img w20" tapmode onclick="openToTwo('qiugou_win')">
            <img class="aui-img-object" src="../image/qiugou-icon.jpg">

            <div class="aui-img-body">
                求购
            </div>
        </li>
        <li class="aui-list-view-cell aui-img w20" tapmode onclick="openToTwo('gongying_win')">
            <img class="aui-img-object" src="../image/gongying-icon.jpg">

            <div class="aui-img-body">
                供应
            </div>
        </li>
        <li class="aui-list-view-cell aui-img w20" tapmode onclick="funcGotoBakHome(2)">
            <img class="aui-img-object" src="../image/renmai-icon.jpg">

            <div class="aui-img-body">
                人脉圈
            </div>
        </li>
    </ul>
</nav>

    <div class="kucun">
        <!--测试图片 <img src="../image/ceshi.jpg" onclick="openToTwo('my/myShop_win')"> -->
        <!-- <img src="../image/ceshi.jpg" onclick="openToTwo('my/myShop_win')"> -->
        <img src="../image/ceshi.jpg" onclick="openToTwo('my/buyerOrderList_win')">

        <!-- <img src="../image/ceshi.jpg" onclick="openProInfo(26)"> -->
    </div>

<div class="aui-content content">
    <!-- 特色 -->
    <div class="tese bgWhite">
        <div class="zfTitle  aui-border-b">行业特色</div>
        <ul class="aui-list-view aui-grid-view" id="Trade-content"></ul>
    </div>
    <!-- 实力商家 -->
    <div class="shili bgWhite">
        <div class="zfTitle  aui-border-b">实力商家</div>
        <ul class="aui-list-view aui-grid-view" id="Brand-content">
            
        <li class="aui-list-view-cell aui-img w19" data-url="{{=it[i].url}}" onclick="brandshow()">
            <img class="aui-img-object" src="../image/shili.jpg">
        </li>
        <li class="aui-list-view-cell aui-img w19" data-url="{{=it[i].url}}" onclick="brandshow()">
            <img class="aui-img-object" src="../image/shili.jpg">
        </li>
        <li class="aui-list-view-cell aui-img w19" data-url="{{=it[i].url}}" onclick="brandshow()">
            <img class="aui-img-object" src="../image/shili.jpg">
        </li>
        <li class="aui-list-view-cell aui-img w19" data-url="{{=it[i].url}}" onclick="brandshow()">
            <img class="aui-img-object" src="../image/shili.jpg">
        </li>
        <li class="aui-list-view-cell aui-img w19" data-url="{{=it[i].url}}" onclick="brandshow()">
            <img class="aui-img-object" src="../image/shili.jpg">
        </li>
        </ul>
    </div>
    <!-- 商品库存 -->
    <div class="kucun">
        <img src="../image/kucun.jpg" onclick="openToTwo('my/myShop_win')">
    </div>
    <!-- 行业市场 -->
    <div class="hangye bgWhite">
        <div class="zfTitle  aui-border-b">行业市场</div>
        <ul class="aui-list-view aui-grid-view" id="Market-content"></ul>
    </div>
</div>
<!-- 分类 -->
<div class="fenlei">
    <div class="contain  mui-row mui-fullscreen">
        <div class="contain-left mui-col-xs-3">
            <div class="aui-content">
                <ul class="aui-list-view" id='Category-content'>
                    <!--一级分类-->

                    
                </ul>
            </div>
        </div>
        <div class="contain-right mui-col-xs-9">
            
            <div class="pic">
                <img src="" alt="" id="categoryImage">
            </div>
            <div class="tuijian" id='Hot-content'>
                <!-- 推荐 热门分类 -->
                
                
            </div>
            <!-- 非热门 -->
            <div class="other" id="Other-content0">
                <!--二三级分类--> 
                <div class="other-title aui-border-b aui-ellipsis-1">
                    级分类
                </div>
                <ul>
                    
                    <li class="aui-list-view-cell aui-img aui-col-xs-4" onclick="toCategoryList({{=it[i].arr[b].catid}})">
                        <div class="aui-img-body aui-ellipsis-1">
                            级分类
                        </div>
                    </li>
                    <li class="aui-list-view-cell aui-img aui-col-xs-4" onclick="toCategoryList({{=it[i].arr[b].catid}})">
                        <div class="aui-img-body aui-ellipsis-1">
                            级分类
                        </div>
                    </li>
                    <li class="aui-list-view-cell aui-img aui-col-xs-4" onclick="toCategoryList({{=it[i].arr[b].catid}})">
                        <div class="aui-img-body aui-ellipsis-1">
                            级分类
                        </div>
                    </li>
                    <li class="aui-list-view-cell aui-img aui-col-xs-4" onclick="toCategoryList({{=it[i].arr[b].catid}})">
                        <div class="aui-img-body aui-ellipsis-1">
                            级分类
                        </div>
                    </li>
                    
                </ul> 
                <div class="other-title aui-border-b aui-ellipsis-1">
                    级分类
                </div>
                <ul>
                    
                    <li class="aui-list-view-cell aui-img aui-col-xs-4" onclick="toCategoryList({{=it[i].arr[b].catid}})">
                        <div class="aui-img-body aui-ellipsis-1">
                            级分类
                        </div>
                    </li>
                    <li class="aui-list-view-cell aui-img aui-col-xs-4" onclick="toCategoryList({{=it[i].arr[b].catid}})">
                        <div class="aui-img-body aui-ellipsis-1">
                            级分类
                        </div>
                    </li>
                    <li class="aui-list-view-cell aui-img aui-col-xs-4" onclick="toCategoryList({{=it[i].arr[b].catid}})">
                        <div class="aui-img-body aui-ellipsis-1">
                            级分类
                        </div>
                    </li>
                    <li class="aui-list-view-cell aui-img aui-col-xs-4" onclick="toCategoryList({{=it[i].arr[b].catid}})">
                        <div class="aui-img-body aui-ellipsis-1">
                            级分类
                        </div>
                    </li>
                    
                </ul> 
                <div class="other-title aui-border-b aui-ellipsis-1">
                    级分类
                </div>
                <ul>
                    
                    <li class="aui-list-view-cell aui-img aui-col-xs-4" onclick="toCategoryList({{=it[i].arr[b].catid}})">
                        <div class="aui-img-body aui-ellipsis-1">
                            级分类
                        </div>
                    </li>
                    <li class="aui-list-view-cell aui-img aui-col-xs-4" onclick="toCategoryList({{=it[i].arr[b].catid}})">
                        <div class="aui-img-body aui-ellipsis-1">
                            级分类
                        </div>
                    </li>
                    <li class="aui-list-view-cell aui-img aui-col-xs-4" onclick="toCategoryList({{=it[i].arr[b].catid}})">
                        <div class="aui-img-body aui-ellipsis-1">
                            级分类
                        </div>
                    </li>
                    <li class="aui-list-view-cell aui-img aui-col-xs-4" onclick="toCategoryList({{=it[i].arr[b].catid}})">
                        <div class="aui-img-body aui-ellipsis-1">
                            级分类
                        </div>
                    </li>
                    
                </ul> 
                <div class="other-title aui-border-b aui-ellipsis-1">
                    级分类
                </div>
                <ul>
                    
                    <li class="aui-list-view-cell aui-img aui-col-xs-4" onclick="toCategoryList({{=it[i].arr[b].catid}})">
                        <div class="aui-img-body aui-ellipsis-1">
                            级分类
                        </div>
                    </li>
                    <li class="aui-list-view-cell aui-img aui-col-xs-4" onclick="toCategoryList({{=it[i].arr[b].catid}})">
                        <div class="aui-img-body aui-ellipsis-1">
                            级分类
                        </div>
                    </li>
                    <li class="aui-list-view-cell aui-img aui-col-xs-4" onclick="toCategoryList({{=it[i].arr[b].catid}})">
                        <div class="aui-img-body aui-ellipsis-1">
                            级分类
                        </div>
                    </li>
                    <li class="aui-list-view-cell aui-img aui-col-xs-4" onclick="toCategoryList({{=it[i].arr[b].catid}})">
                        <div class="aui-img-body aui-ellipsis-1">
                            级分类
                        </div>
                    </li>
                    
                </ul> 
                <div class="other-title aui-border-b aui-ellipsis-1">
                    级分类
                </div>
                <ul>
                    
                    <li class="aui-list-view-cell aui-img aui-col-xs-4" onclick="toCategoryList({{=it[i].arr[b].catid}})">
                        <div class="aui-img-body aui-ellipsis-1">
                            级分类
                        </div>
                    </li>
                    <li class="aui-list-view-cell aui-img aui-col-xs-4" onclick="toCategoryList({{=it[i].arr[b].catid}})">
                        <div class="aui-img-body aui-ellipsis-1">
                            级分类
                        </div>
                    </li>
                    <li class="aui-list-view-cell aui-img aui-col-xs-4" onclick="toCategoryList({{=it[i].arr[b].catid}})">
                        <div class="aui-img-body aui-ellipsis-1">
                            级分类
                        </div>
                    </li>
                    <li class="aui-list-view-cell aui-img aui-col-xs-4" onclick="toCategoryList({{=it[i].arr[b].catid}})">
                        <div class="aui-img-body aui-ellipsis-1">
                            级分类
                        </div>
                    </li>
                    
                </ul> 


            </div>
        </div>
    </div>
</div>
<script id="Trade-template" type="text/x-dot-template">

    {{ for(var i in it) { }}
    <li class="aui-list-view-cell aui-img aui-col-xs-4" data-url="{{=it[i].url}}" onclick="tradeShow();">
        <img class="aui-img-object" src="{{=it[i].image_src}}">

        <div class="aui-img-body">
            {{=it[i].title}}
        </div>
    </li>
    {{ } }}
</script>
<script id="Brand-template" type="text/x-dot-template">
    {{ for(var i in it) { }}
    <li class="aui-list-view-cell aui-img w19" data-url="{{=it[i].url}}" onclick="brandshow()">
        <img class="aui-img-object" src="{{=it[i].image_src}}">
    </li>
    {{ } }}
</script>
<script id="Market-template" type="text/x-dot-template">
    {{ for(var i in it) { }}
    <li class="aui-list-view-cell aui-img aui-col-xs-3">
        <img class="aui-img-object" src="{{=it[i].image_src}}">

        <div class="aui-img-body">
            {{=it[i].catname}}
        </div>
    </li>
    {{ } }}
    <!-- 这个要保留的 -->
    <li class="aui-list-view-cell aui-img aui-col-xs-3">
        <img class="aui-img-object" src="../image/shouqi.jpg">

        <div class="aui-img-body">
            收起
        </div>
    </li>
</script>
<script id="Category-template" type="text/x-dot-template">
    {{ for(var i in it) { }}
    <li class='aui-list-view-cell aui-ellipsis-1 {{? i == 0}}active{{?}}' tapmode
        onclick='changeCategory(this), categorySubordinate({{=it[i].catid}})'>
        {{=it[i].catname}}
    </li>
    {{ } }}
</script>
<script id="Hot-template" type="text/x-dot-template">
    {{ for(var i in it) { }}
    <div class="aui-content">
        <div class="tuijian-title aui-ellipsis-1">{{=it[i].catname}}</div>
        <ul class="aui-list-view aui-grid-view">
            {{ for(var b in it[i].arr) { }}
            <li class="aui-list-view-cell aui-img aui-col-xs-4">
                <img class="aui-img-object" src="
                {{? it[i].catname == '品牌推荐'}}
                {{=it[i].arr[b].thumb}}
                {{??}}
                {{=it[i].arr[b].image_src}}
                {{?}}
                ">

                <div class="aui-img-body aui-ellipsis-1">
                    {{? it[i].catname == '品牌推荐'}}
                    {{=it[i].arr[b].title}}
                    {{??}}
                    {{=it[i].arr[b].catname}}
                    {{?}}
                </div>
            </li>
            {{ } }}
        </ul>
    </div>
    {{ } }}
</script>
<script id="Other-template" type="text/x-dot-template">
    {{ for(var i in it) { }}
    <div class="other-list">
        <div class="other-title aui-border-b aui-ellipsis-1">
            {{=it[i].catname}}
        </div>
        <ul>
            {{ for(var b in it[i].arr) { }}
            <li class="aui-list-view-cell aui-img aui-col-xs-4" onclick="toCategoryList({{=it[i].arr[b].catid}})">
                <div class="aui-img-body aui-ellipsis-1">
                    {{=it[i].arr[b].catname}}
                </div>
            </li>
            {{ } }}
        </ul>
    </div>
    {{ } }}
</script>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/common.js"></script>
<script type="text/javascript" src="../script/myInfo.js"></script>
<script type="text/javascript" src="../script/doT.min.js"></script>
<script type="text/javascript" src="../script/echo.js"></script>
<script type="text/javascript" src="../script/jquery-1.11.3.js"></script>
<script type="text/javascript">
    apiready = function () {
        api.parseTapmode();
        getTrade();
        getBrand();
        getMarket();
        hotCategory();
        categoryImage();
    }

    function getTrade() {
        var data = {};
        var url = 'index/getTrade';
        ajaxRequest(url, 'get', data, function (ret, err) {
            if (ret.status == 1) {
                var content = $api.byId('Trade-content');
                var tpl = $api.byId('Trade-template').text;
                var tempFn = doT.template(tpl);
                $api.html(content, '');
                $api.prepend(content, tempFn(ret.msg));
                //图片延时加载
                echo.init({
                    offset: 0,
                    throttle: 250
                });
            } else {
                api.toast({
                    msg: ret.msg,
                    duration: 2000,
                    location: 'bottom'
                })
            }
        })
    }
    ///切换左侧分类的样式

    //$(document).on("click",".contain-left li",function(){
    function changeCategory(obj) {
        $(".contain-left li").removeClass("active").addClass("aui-border-l").addClass("aui-border-r");
        $(obj).addClass("active").removeClass("aui-border-l").removeClass("aui-border-r");
        if ($(obj).index() == 0) {
            $(".tuijian").css({"display": "block"});
            $(".other").css({"display": "none"});
        } else {
            $(".tuijian").css({"display": "none"});
            $(".other").css({"display": "block"});
        }
    }
    //导航上面的分类控制显示隐藏
    function Category() {
        if ($(".fenlei").css("display") == "none") {
            $(".fenlei").css({"display": "block"});
            $(".content").css({"display": "none"});
        } else {
            $(".content").css({"display": "block"});
            $(".fenlei").css({"display": "none"});
        }

    }
    function getBrand() {
        var data = {};
        var url = 'index/getBrand';
        ajaxRequest(url, 'get', data, function (ret, err) {
            if (ret.status == 1) {
                var content = $api.byId('Brand-content');
                var tpl = $api.byId('Brand-template').text;
                var tempFn = doT.template(tpl);
                $api.html(content, '');
                $api.prepend(content, tempFn(ret.msg));
                //图片延时加载
                echo.init({
                    offset: 0,
                    throttle: 250
                });
            } else {
                api.toast({
                    msg: ret.msg,
                    duration: 2000,
                    location: 'bottom'
                })
            }
        })
    }

    function getMarket() {
        var data = {};
        var url = 'index/getMarket';
        ajaxRequest(url, 'get', data, function (ret, err) {
            if (ret.status == 1) {
                var content = $api.byId('Market-content');
                var tpl = $api.byId('Market-template').text;
                var tempFn = doT.template(tpl);
                $api.html(content, '');
                $api.prepend(content, tempFn(ret.msg));
                //图片延时加载
                echo.init({
                    offset: 0,
                    throttle: 250
                });
            } else {
                api.toast({
                    msg: ret.msg,
                    duration: 2000,
                    location: 'bottom'
                })
            }
        })
    }

    
    function funcGotoBakHome(index) {
            api.execScript({
                name: 'root',
                script: 'randomSwitchBtnBakHome(' + index + ')'
            });
    }
    //提示信息
    function message() {
        api.toast({
            msg: '暂不支持',
            duration: 2000,
            location: 'middle'
        });
    }

    function tobrand() {
        api.openWin({
            name: 'pinpaishang_win',
            url: 'pinpaishang_frm.html',
            reload: true,
            delay: 300
        });
    }

    //增加商品推荐分类及一级分类
    function hotCategory() {
        showLoading();
        var data = {};
        var url = 'category/categoryOne';
        ajaxRequest(url, 'get', data, function (ret, err) {
            if (ret.status == 1) {
                var content = $api.byId('Category-content');
                var tpl = $api.byId('Category-template').text;
                var tempFn = doT.template(tpl);
                $api.html(content, '');
                $api.prepend(content, tempFn(ret.msg));
                //商品推荐
                var content = $api.byId('Hot-content');
                var tpl = $api.byId('Hot-template').text;
                var tempFn = doT.template(tpl);
                $api.html(content, '');
                $api.prepend(content, tempFn(ret.msg[0].arr));
                hideLoading();
                //图片延时加载
                echo.init({
                    offset: 0,
                    throttle: 250
                });
            } else {
                hideLoading();
                api.toast({
                    msg: ret.msg,
                    duration: 2000,
                    location: 'bottom'
                })
            }
        })
    }

    //增加分类下面下级分类
    function categorySubordinate(catid) {
        showLoading();
        var data = {};
        var url = 'category/categorysubordinate/parentid/' + catid;
        ajaxRequest(url, 'get', data, function (ret, err) {
            var content = $api.byId('Other-content');
            $api.html(content, '');
            if (ret.status == 1) {
                var tpl = $api.byId('Other-template').text;
                var tempFn = doT.template(tpl);
                $api.prepend(content, tempFn(ret.msg));
                hideLoading();
                //图片延时加载
                echo.init({
                    offset: 0,
                    throttle: 250
                });
            } else {
                hideLoading();
                api.toast({
                    msg: ret.msg,
                    duration: 2000,
                    location: 'bottom'
                })
            }
        })
    }

    //商品分类顶图
    function categoryImage() {
        var data = {};
        var url = 'category/categoryImage';
        ajaxRequest(url, 'get', data, function (ret, err) {
            if (ret.status == 1) {
                $('#categoryImage').attr('src', ret.msg);
            } else {
                api.toast({
                    msg: ret.msg,
                    duration: 2000,
                    location: 'bottom'
                })
            }
        })
    }
    //打开商品列表
    function toCategoryList(catId)
    {
        api.openWin({
            name : 'categoryList_win',
            url : 'categoryList_win.html',
            pageParam : {
                categoryId : catId
            },
            delay : 300
        });
    }
</script>
</html>